<!--
 * @Descripttion: 
 * @version: 
 * @Author: kk
 * @Date: 2020-10-24 10:02:48
 * @LastEditors: kk
 * @LastEditTime: 2020-10-30 17:35:18
-->
<!--  -->
<template>
  <div>
    <Header></Header>
    <div>
      <ul
        class="infinite-list Center"
        v-infinite-scroll="load"
        style="overflow:auto"
      >
        <el-divider></el-divider>
        <li
          v-for="itemKill in itemKills"
          :key="itemKill.id"
          class="infinite-list-item"
        >
          <div class="block">
            <span class="demonstration"><h3>{{ itemKill.name }}</h3></span>
            <img src="../assets/goods2.png" class="itemImg" @click="toItem(itemKill.id,itemKill.name,itemKill.total,url)">
          </div>
          <span><h4>商品数量：{{itemKill.total}}</h4></span>
          <el-button type="primary" @click="toItem(itemKill.id,itemKill.name,itemKill.total,url)" 
           :disabled="itemKill.isStop">{{itemKill.leftTime}}</el-button>
          <el-divider></el-divider>
        </li>

      </ul>
    </div>
    
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Header from "@/components/Header";
import itemKill from "@/api/miaosha";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
  data() {
    //这里存放数据
    return {
      itemKillInfo: {
      },
      itemKills: [],
      itemQuery: {},
      count: 0,
      url: "https://source.unsplash.com/random",
      isActive: true,
      stop: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    load() {
      this.count += 2;
    },
    getKillList() {
      itemKill.getKills(this.itemQuery).then((response) => {
        console.log(response.data);
        this.itemKills = response.data.itemKills;  
        this.count = response.data.total;
      });
    },
    toItem(itemKillId,name,total,url){
         this.$router.push({name:'item',query: {id:itemKillId}}) 
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getKillList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
     setInterval( ()=> {
        for(var key in this.itemKills){
          if(this.itemKills.length>0){
            var startTime = this.itemKills[key].startTime
            var endTime = this.itemKills[key].endTime
            var arr = startTime.split(/[- : \/]/);
            var arr2= endTime.split(/[- : \/]/);
            
            var a = Date.parse(new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5])); //startTime
            var c = Date.parse(new Date(arr2[0], arr2[1]-1, arr2[2], arr2[3], arr2[4], arr2[5])); //endTime
            var b=new Date().getTime();
            var rightTime = a-b;
            
            if (rightTime > 0) {
                    var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
                    var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
                    var mm = Math.floor((rightTime / 1000 / 60) % 60);
                    var ss = Math.floor((rightTime / 1000) % 60);
                    this.itemKills[key].leftTime=dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
                    this.itemKills[key].isStop=true; //按钮失效
            }else if(b>c){             
              this.itemKills[key].leftTime='已结束';
              this.itemKills[key].isStop=true; //按钮失效
            }else{            
              this.itemKills[key].leftTime='立即抢购';
              this.itemKills[key].isStop=false; //按钮激活
            }
          }
        }
     },1000)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.Center {
  text-align: center;
  margin: 0 auto;
  list-style: none;
}
.itemImg{
    width: 40%;
    height: 60%;
}
</style>